﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>{$SiteName/}_首页</title>
{$MetaKeywords/}
{$MetaDescription/}
<title>逐浪百变微站_首页</title>
{$MetaKeywords/}
{$MetaDescription/}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="renderer" content="webkit">
<link href="/dist/css/font-awesome.min.css" rel="stylesheet"/>
<link href="/dist/css/ZLico.css" rel="stylesheet"/>
<link rel="stylesheet" href="/dist/css/weui.min.css" />
<script type="text/javascript" src="/JS/jquery-1.11.1.min.js" ></script>
<link rel="stylesheet" href="/dist/css/swiper.min.css" />
<script src="/dist/js/swiper.min.js"></script>
<link href="{$CssDir/}style.css?Version={ZL.Label id="前端样式版本号"/}" rel="stylesheet" />
<style>
</style>
{ZL:GetCSS(1,1)/}
</head>
<body>
<div class="page tabbar js_show">
<div class="page__bd" style="height:100%;">
<div class="weui-tab">
<div class="weui-tab__panel">

<div class="weui-flex home_header">
<div class="weui-flex__item">
<h1><i class="fa fa-dashboard"></i>上海微百货</h1>
</div><!--头部第一块结束-->
<div class="weui-flex__item home_header_r" >
<span class="pull-right"><a href="#" ><i class="fa fa-gift"></i><br/>惊喜</a></span>
<span class="pull-right"><a href="javascript:;" id="showIOSActionSheet"><i class="fa fa-navicon"></i><br/>Menu</a></span>
</div>
</div>
        
<div class="home_top " hidden>
<h1><i class="fa fa-dashboard"></i>上海微百货</h1>
<!--<a class="logo" ><img src="{$CssDir/}images/logo.jpg" alt="南京微生活" /></a><-->

<form action="#">
<input type="text" class="form-control" name="keyword" placeholder="输入关键字查询" />
<button type="submit"><i class="fa fa-search"></i></button>
</form>
<a href="#" class="pull-right gift"><i class="fa fa-gift"></i><br/>惊喜</a>
</div>
<!--头部结束-->

<div class="page__bd">
<!--<a href="javascript:;" class="weui-btn weui-btn_primary">点击展现searchBar</a>-->
<div class="weui-search-bar" id="searchBar">
<form action="/Search/SearchList" class="weui-search-bar__form" method="get">
<div class="weui-search-bar__box">
<i class="weui-icon-search"></i>
<input type="search" class="weui-search-bar__input" name="keyword" id="searchInput" placeholder="搜索"  />
<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
</div>
<label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
<i class="weui-icon-search"></i>
<span>搜索</span>
</label>
</form>
<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
<div class="weui-cells searchbar-result" id="searchResult" style="display: none;">
<div class="weui-cell weui-cell_access">
<div class="weui-cell__bd weui-cell_primary">
<p>苹果</p>
</div>
</div>
<div class="weui-cell weui-cell_access">
<div class="weui-cell__bd weui-cell_primary">
<p>apple</p>
</div>
</div>
<div class="weui-cell weui-cell_access">
<div class="weui-cell__bd weui-cell_primary">
<p>pinguo</p>
</div>
</div>
<div class="weui-cell weui-cell_access">
<div class="weui-cell__bd weui-cell_primary">
<p>test</p>
</div>
</div>
</div>
</div>
<!--搜索框结束-->

<div class="mycontainer padding0_xs">
<div class="home_pics">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="#"><img src="{$CssDir/}images/weui_home_banner1.jpg" alt="第一张banner图" /></a></div>
<div class="swiper-slide"><a href="#"><img src="{$CssDir/}images/weui_home_banner2.jpg" alt="第二张banner图" /></a></div>
<div class="swiper-slide"><a href="#"><img src="{$CssDir/}images/weui_home_banner3.jpg" alt="第三张banner图" /></a></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
<!--轮播图结束-->

<div class="home_menus">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<ul>
<li><a href="{ZL:GetNodeLinkUrl(145)/}"><img src="{$CssDir/}images/home_pic1.jpg" alt="党政机关" /><br/>党政机关</a></li>
<li><a href="{ZL:GetNodeLinkUrl(146)/}"><img src="{$CssDir/}images/home_pic2.jpg" alt="美食天地" /><br/>美食天地</a></li>
<li><a href="{ZL:GetNodeLinkUrl(147)/}"><img src="{$CssDir/}images/home_pic3.jpg" alt="休闲娱乐" /><br/>休闲娱乐</a></li>
<li><a href="{ZL:GetNodeLinkUrl(148)/}"><img src="{$CssDir/}images/home_pic4.jpg" alt="宾馆住宿" /><br/>宾馆住宿</a></li>
<li><a href="{ZL:GetNodeLinkUrl(149)/}"><img src="{$CssDir/}images/home_pic5.jpg" alt="拼车租车" /><br/>拼车租车</a></li>
<li><a href="{ZL:GetNodeLinkUrl(150)/}"><img src="{$CssDir/}images/home_pic6.jpg" alt="快递物流" /><br/>快递物流</a></li>
<li><a href="{ZL:GetNodeLinkUrl(151)/}"><img src="{$CssDir/}images/home_pic7.jpg" alt="时尚女人" /><br/>时尚女人</a></li>
<li><a href="{ZL:GetNodeLinkUrl(152)/}"><img src="{$CssDir/}images/home_pic8.jpg" alt="乡镇商户" /><br/>乡镇商户</a></li>
<li><a href="{ZL:GetNodeLinkUrl(153)/}"><img src="{$CssDir/}images/home_pic9.jpg" alt="便民服务" /><br/>便民服务</a></li>
<li><a href="{ZL:GetNodeLinkUrl(154)/}"><img src="{$CssDir/}images/home_pic10.jpg" alt="汽车相关" /><br/>汽车相关</a></li>
<li><a href="{ZL:GetNodeLinkUrl(155)/}"><img src="{$CssDir/}images/home_pic11.jpg" alt="手机电脑" /><br/>手机电脑</a></li>
<li><a href="{ZL:GetNodeLinkUrl(156)/}"><img src="{$CssDir/}images/home_pic12.jpg" alt="服装鞋包" /><br/>服装鞋包</a></li>
<li><a href="{ZL:GetNodeLinkUrl(157)/}"><img src="{$CssDir/}images/home_pic13.jpg" alt="婚庆礼仪" /><br/>婚庆礼仪</a></li>
<li><a href="{ZL:GetNodeLinkUrl(158)/}"><img src="{$CssDir/}images/home_pic14.jpg" alt="摄影摄像" /><br/>摄影摄像</a></li>
<li><a href="{ZL:GetNodeLinkUrl(159)/}"><img src="{$CssDir/}images/home_pic15.jpg" alt="医药诊所" /><br/>医药诊所</a></li>
</ul>
</div>
<div class="swiper-slide">
<ul>
<li><a href="{ZL:GetNodeLinkUrl(160)/}"><img src="{$CssDir/}images/home_pic1.jpg" alt="潮流女装" /><br/>潮流女装</a></li>
<li><a href="{ZL:GetNodeLinkUrl(161)/}"><img src="{$CssDir/}images/home_pic2.jpg" alt="品牌男装" /><br/>品牌男装</a></li>
<li><a href="{ZL:GetNodeLinkUrl(162)/}"><img src="{$CssDir/}images/home_pic3.jpg" alt="美妆个护" /><br/>美妆个护</a></li>
<li><a href="{ZL:GetNodeLinkUrl(163)/}"><img src="{$CssDir/}images/home_pic4.jpg" alt="家用电器" /><br/>家用电器</a></li>
<li><a href="{ZL:GetNodeLinkUrl(164)/}"><img src="{$CssDir/}images/home_pic5.jpg" alt="电脑办公" /><br/>电脑办公</a></li>
<li><a href="{ZL:GetNodeLinkUrl(165)/}"><img src="{$CssDir/}images/home_pic6.jpg" alt="手机数码" /><br/>手机数码</a></li>
<li><a href="{ZL:GetNodeLinkUrl(166)/}"><img src="{$CssDir/}images/home_pic7.jpg" alt="母婴童装" /><br/>母婴童装</a></li>
<li><a href="{ZL:GetNodeLinkUrl(167)/}"><img src="{$CssDir/}images/home_pic8.jpg" alt="家居家纺" /><br/>家居家纺</a></li>
<li><a href="{ZL:GetNodeLinkUrl(168)/}"><img src="{$CssDir/}images/home_pic9.jpg" alt="厨房用品" /><br/>厨房用品</a></li>
<li><a href="{ZL:GetNodeLinkUrl(169)/}"><img src="{$CssDir/}images/home_pic10.jpg" alt="家具建材" /><br/>家具建材</a></li>
<li><a href="{ZL:GetNodeLinkUrl(170)/}"><img src="{$CssDir/}images/home_pic11.jpg" alt="食品生鲜" /><br/>食品生鲜</a></li>
<li><a href="{ZL:GetNodeLinkUrl(171)/}"><img src="{$CssDir/}images/home_pic12.jpg" alt="酒水饮料" /><br/>酒水饮料</a></li>
<li><a href="{ZL:GetNodeLinkUrl(172)/}"><img src="{$CssDir/}images/home_pic13.jpg" alt="运动户外" /><br/>运动户外</a></li>
<li><a href="{ZL:GetNodeLinkUrl(173)/}"><img src="{$CssDir/}images/home_pic14.jpg" alt="鞋靴箱包" /><br/>鞋靴箱包</a></li>
<li><a href="{ZL:GetNodeLinkUrl(174)/}"><img src="{$CssDir/}images/home_pic15.jpg" alt="奢品礼品" /><br/>奢品礼品</a></li>
</ul>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
<!--图标结束-->
</div>

<div class="page__bd">
<div class="weui-panel weui-panel_access">
<div class="weui-panel__hd">推荐商家</div>
<div class="weui-panel__bd">
{ZL.Label id="输出推荐商家列表" ShowNum="2" /}
</div>
<div class="weui-panel__ft">
<a href="{ZL:GetNodeListUrl(145)/}" class="weui-cell weui-cell_access weui-cell_link">
<div class="weui-cell__bd">查看更多</div>
<span class="weui-cell__ft"></span>
</a>    
</div>
</div>
<div class="weui-panel weui-panel_access">
<div class="weui-panel__hd">热门商家</div>
<div class="weui-panel__bd">
{ZL.Label id="输出非推荐商家列表" ShowNum="2" /}
</div>
<div class="weui-panel__ft">
<a href="{ZL:GetNodeListUrl(145)/}" class="weui-cell weui-cell_access weui-cell_link">
<div class="weui-cell__bd">查看更多</div>
<span class="weui-cell__ft"></span>
</a>    
</div>
</div>
<div class="weui-panel">
<div class="weui-panel__hd">地市新闻</div>
<div class="weui-panel__bd">
<div class="weui-media-box weui-media-box_small-appmsg">
<div class="weui-cells">
{ZL.Label id="首页输出地市新闻列表" NodeID="175" ShowNum="5" /}
</div>
</div>
</div>
</div>
<div class="weui-panel">
<div class="weui-panel__hd">关于我们</div>
<div class="weui-panel__bd">
{ZL.Label id="首页输出关于我们列表" NodeID="176" ShowNum="5" /}
</div>
</div>
</div>

<div class="home_ico" style=" text-align:center">
欣赏来自逐浪官方的图标工具，接受我们满满的诚意：<br/>
<p>
<i class="fa z01-icon001"></i>
<i class="fa z01-icon002"></i>
<i class="fa z01-icon003"></i>
<i class="fa z01-icon004"></i>
<i class="fa Z01-icon004"></i>
<i class="fa z01-icon005"></i>
<i class="fa z01-icon006"></i>
<i class="fa z01-icon007"></i>
<i class="fa z01-icon008"></i>
<i class="fa z01-icon009"></i>
<i class="fa z01-icon010"></i>
</p>
</div>
<!--功能结束-->

<div class="weui-tabbar page__ft j_bottom">
<a href="#" class="weui-tabbar__item  weui-bar__item_on">
<i class="fa z01-icon001 weui-tabbar__icon"></i>
<p class="weui-tabbar__label">首页</p>
</a>
<a href="{ZL:GetNodeListUrl(145)/}" class="weui-tabbar__item">
<i class="fa z01-icon002 weui-tabbar__icon"></i>
<p class="weui-tabbar__label">商家</p>
</a>
<a href="{ZL:GetNodeLinkUrl(177)/}" class="weui-tabbar__item">
<i class="fa z01-icon003 weui-tabbar__icon"></i>
<p class="weui-tabbar__label">商城</p>
</a>
<a href="/User/" class="weui-tabbar__item">
<i class="fa z01-icon004 weui-tabbar__icon"></i>
<p class="weui-tabbar__label">会员</p>
</a>
</div>
<!--foot end-->

<div>
<div class="weui-mask" id="iosMask" style="opacity:1; display: none;"></div>
<div class="weui-actionsheet" id="iosActionsheet">
<div class="weui-actionsheet__menu">
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
</div>
<div class="weui-actionsheet__action">
<div class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>


</body>
</html>
<script>
//滚动图？
var swiper = new Swiper('.home_pics .swiper-container', {
	pagination: '.swiper-pagination',
	slidesPerView: 1,
	paginationClickable: true,
	loop: true,
	grabCursor: true,
	autoplay: 3000
});
var swiper1 = new Swiper('.home_menus .swiper-container', {
	pagination: '.swiper-pagination',
	slidesPerView: 1,
	paginationClickable: true,
	loop: true,
	grabCursor: true
});

$(function(){
	var $searchBar = $('#searchBar'),
		$searchResult = $('#searchResult'),
		$searchText = $('#searchText'),
		$searchInput = $('#searchInput'),
		$searchClear = $('#searchClear'),
		$searchCancel = $('#searchCancel');

	function hideSearchResult(){
		$searchResult.hide();
		$searchInput.val('');
	}
	function cancelSearch(){
		hideSearchResult();
		$searchBar.removeClass('weui-search-bar_focusing');
		$searchText.show();
	}

	$searchText.on('click', function(){
		$searchBar.addClass('weui-search-bar_focusing');
		$searchInput.focus();
	});
	$searchInput
		.on('blur', function () {
			if(!this.value.length) cancelSearch();
		})
		.on('input', function(){
			if(this.value.length) {
				$searchResult.show();
			} else {
				$searchResult.hide();
			}
		})
	;
	$searchClear.on('click', function(){
		hideSearchResult();
		$searchInput.focus();
	});
	$searchCancel.on('click', function(){
		cancelSearch();
		$searchInput.blur();
	});
});
// ios
$(function(){
	var $iosActionsheet = $('#iosActionsheet');
	var $iosMask = $('#iosMask');

	function hideActionSheet() {
		$iosActionsheet.removeClass('weui-actionsheet_toggle');
		$iosMask.fadeOut(200);
	}

	$iosMask.on('click', hideActionSheet);
	$('#iosActionsheetCancel').on('click', hideActionSheet);
	$("#showIOSActionSheet").on("click", function(){
		$iosActionsheet.addClass('weui-actionsheet_toggle');
		$iosMask.fadeIn(200);
	});
});
</script>